import { useNavigate } from 'react-router-dom';
import { NavBar,Dialog } from 'react-vant'
import { useEffect, useState } from 'react';
import axios from 'axios';
import { DeleteO } from '@react-vant/icons';
import '../../sass/MyTicket.scss'

function MyTicket() {

	let navigate = useNavigate()

	let statusData = ['全部', '进行中', '已完成']
	let [acitveIndex, setActiveIndex] = useState(0)
	let [goodsData, setGoodsData] = useState([])
	let [firstLoad, setFirstLoad] = useState(false)

	//更换订单状态
	let changeTicketStatus = (index) => {
		if (index == acitveIndex && firstLoad) {
			return
		}
		setActiveIndex(index)
		axios({
			method: 'get',
			url: '/findOrder',
			params: {
				status: index
			}
		}).then(res => {
			// console.log(res);
			let oid = []
			let goodsItem = []
			res.data.result.forEach(item => {
				if (oid.indexOf(item.oid) == -1) {
					oid.push(item.oid)
				}
			})
			oid.forEach((item, index) => {
				goodsItem[index] = { oid: item, data: [] }
			})
			res.data.result.forEach(item => {
				goodsItem.forEach(item2 => {
					if (item2.oid == item.oid) {
						item2.data.push(item)
					}
				})
			})
			goodsItem.forEach(item => {
				let time = item.data[0].createdAt.split('T')
				let hours = time[1].split(':')
				let hour = hours[0]=Number(hours[0])+8
				hour = hour < 10 ? '0' + hour : hour
				time[1] = hours.join(':')
				item.createAt = time[0] + ' ' + time[1].slice(0, -5)
				let totalPrice = 0
				let count = 0
				item.data.forEach(item2 => {
					totalPrice += Number(item2.price) * item2.count
					count += item2.count
				})
				item.count = count
				item.totalPrice = totalPrice
				item.status = item.data[0].status
			})
			goodsData = goodsItem.reverse()
			setGoodsData([...goodsData]);
		})
	}

	//确认收货
	let confirmToReceive = (item,index) => {
		if (acitveIndex==1||acitveIndex==0&&item.status==1) {
			goodsData.forEach((item2,index2) => {
				if(item2.oid==item.oid&&acitveIndex==1) {
					goodsData.splice(index2,1)
					setGoodsData([...goodsData])
				}else {
					item2.status=2
					setGoodsData([...goodsData])
				}
			})
			axios({
				method:'post',
				url:'/receive',
				data:{
					oid:item.oid
				}
			}).then(res => {
				if(res.data.code!=80000){
					return
				}
			})
		}
	}

	//删除订单
	let deteleItem = index => {
		Dialog.confirm({
			title: '提示',
			message: '确定要删除吗?',
		})
			.then(() => {
				axios({
					method:'post',
					url:'/removeOrder',
					data:{
						oid:goodsData[index].oid
					}
				}).then(res => {
					goodsData.splice(index,1)
					setGoodsData([...goodsData])
				})
			})
			.catch(() => {
			})
	}

	useEffect(() => {
		changeTicketStatus(0)
		setFirstLoad(true)
	}, [])

	return (
		<div className="my-ticket">
			<NavBar
				title="我的订单"
				leftText="返回"
				onClickLeft={() => navigate('/My')}
			/>
			<div className="top-img"></div>
			<div className="top-change-status">
				{
					statusData.map((item, index) => {
						return (
							<div className={`change-status-list ${index == acitveIndex ? 'border-bottom' : ''}`} key={index} onClick={() => { changeTicketStatus(index) }}>{item}</div>
						)
					})
				}
			</div>
			<div className="content-wrap">
				{
					goodsData.map((item, index) => {
						return (
							<div className="content-list" key={item.oid}>
								<div className="top-title">订单信息</div>
								<div className="top-oid-wrap">
									<div className="top-oid">订单编号：{item.oid}</div>
									<div className="top-confirm" onClick={() => {confirmToReceive(item,index)}}>{item.status == 1 ? '确认收货' : '已完成'}		{item.status==2?<span className="icon" onClick={() => {deteleItem(index)}}><DeleteO  /></span>:''}
									</div>
								</div>
								<div className="goods-wrap">
									{
										item.data.map((item2, index2) => {
											return (
												<div className="goods-list" key={index2}>
													<div className="left">
														<img className='auto-img' src={item2.smallImg} alt="" />
													</div>
													<div className="right">
														<div className="name-wrap">
															<div className="name">{item2.name}</div>
															<div className="rule">{item2.rule}</div>
														</div>
														<div className="enname">{item2.enname}</div>
														<div className="price-wrap">
															<div className="price">¥{item2.price}</div>
															<div className="count">x{item2.count}</div>
														</div>
													</div>
												</div>
											)

										})
									}
								</div>
								<div className="create-at">{item.createAt}</div>
								<div className="total-wrap">
									<div className="total-count">共计 {item.count} 件商品</div>
									<div className="total-price">订单金额：¥{item.totalPrice}</div>
								</div>
								<div className="circle-left"></div>
								<div className="circle-right"></div>
							</div>
						)
					})
				}
			</div>
		</div>
	)
}
export default MyTicket;